<template>
	<view class="container">
		<view class="tui-box">
			<view>
				<view class="mylist">
					<view class="list-item" @tap="selectePerson">
						<view class="list_box">
							<view class="my-icon">
								<image src="../../../static/icon/footer_house.png" class="my-img"></image>
							</view>
							<view class="list_box_text">
								{{storename}}
							</view>
						</view>
						<view class="right-icon">
							<image src="../../../static/images/right.png" class="right-img"></image>
						</view>
					</view>
				</view>
				<view style="height:16rpx;background-color:#f4f4f4;"></view>
			</view>
			<!-- 技师信息 -->
			<view v-if="worker_list[0]">
				<view class="card">
					<view class="left-icon">
						<image :src="worker_list[0].avatar_path" class="left-img"></image>
					</view>
					<view class="right-card">
						<view class="text-box">
							<view class="title">{{worker_list[0].name}}</view>
							<view class="text-phone">
								<!-- <view class="phone-icon">
									<image src="../../../static/images/phone.png" class="phone-img"></image>
								</view> -->
								<view class="text-left">服务次数:{{worker_list[0].finish_count}}</view>
								<!-- <view class="tips">拨打</view> -->
							</view>
						</view>
						<view class="right-text" @tap="goUrl">
							<view class="text">点击进入</view>
							<view class="right-icon">
								<image src="../../../static/images/right_icon.png" class="right-img"></image>
							</view>
						</view>
					</view>
				</view>
				<view style="height:16rpx;background-color:#f4f4f4;"></view>
			</view>
			<view>
				<view class="mylist">
					<view class="list-item" @tap="selecteTime">
						<view class="list_box">
							<view class="my-icon">
								<image src="../../../static/icon/footer_house.png" class="my-img"></image>
							</view>
							<view class="list_box_text">
								选择时间 &nbsp;<text style="font-weight: 700;">{{startTime}}</text>
							</view>
						</view>
						<view class="right-icon">
							<image src="../../../static/images/right.png" class="right-img"></image>
						</view>
					</view>
				</view>
				<view style="height:16rpx;background-color:#f4f4f4;"></view>
			</view>
			<!-- 配置信息 -->
			<view>
				<view class="mylist">
					<view v-for="(items,indexs) in formData" :key="indexs">
						<view class="list-item" v-if="items.type == 0" >
							<view class="list_box">
								<view class="my-icon">
									<image src="../../../static/icon/footer_house.png" class="my-img"></image>
								</view>
								<view class="list_box_text">
									{{items.name}}
								</view>
							</view>
							<view class="input-box">
								<input type="text" v-model="formData[indexs].value" maxlength="20" style="padding-right: 20rpx;width: 100%;text-align: right;" value=""
								 placeholder-style="font-size: 24rpx;font-weight: normal;font-stretch: normal;line-height: 60rpx;letter-spacing: 0rpx;color: #c3c3c3;"
								 :placeholder="'请输入' + items.name" />
							</view>
						</view>
						<view class="list-item" v-if="items.type == 1">
							<view class="list_box">
								<view class="my-icon">
									<image src="../../../static/icon/footer_house.png" class="my-img"></image>
								</view>
								<view class="list_box_text">
									{{items.name}}
								</view>
							</view>
							<view class="input-box">
								<input type="text" v-model="formData[indexs].value" maxlength="20" style="padding-right: 20rpx;width: 100%;text-align: right;" value=""
								 placeholder-style="font-size: 24rpx;font-weight: normal;font-stretch: normal;line-height: 60rpx;letter-spacing: 0rpx;color: #c3c3c3;"
								 :placeholder="'请输入' + items.name" />
							</view>
						</view>
						<view class="list-item" v-if="items.type == 2">
							<view class="list_box">
								<view class="my-icon">
									<image src="../../../static/icon/footer_house.png" class="my-img"></image>
								</view>
								<view class="list_box_text">
									{{items.name}}
								</view>
							</view>
							<view class="input-box">
								<input type="text" v-model="formData[indexs].value" maxlength="20" style="padding-right: 20rpx;width: 100%;text-align: right;" value=""
								 placeholder-style="font-size: 24rpx;font-weight: normal;font-stretch: normal;line-height: 60rpx;letter-spacing: 0rpx;color: #c3c3c3;"
								 :placeholder="'请输入' + items.name" />
							</view>
						</view>
						<view class="list-item" @tap="selecteaddress(items.type,indexs)" v-if="items.type == 3">
							<view class="list_box">
								<view class="my-icon">
									<image src="../../../static/icon/footer_house.png" class="my-img"></image>
								</view>
								<view class="list_box_text">
									{{items.name}}
								</view>
							</view>
							<view class="right-icon">
								<image src="../../../static/images/right.png" class="right-img"></image>
							</view>
						</view>
						<view class="list-item" @tap="goUrl" v-if="items.type == 4">
							<view class="list_box">
								<view class="my-icon">
									<image src="../../../static/icon/footer_house.png" class="my-img"></image>
								</view>
								<view class="list_box_text">
									{{items.name}}
								</view>
							</view>
							<view class="input-box">
								<input type="number" v-model="formData[indexs].value" maxlength="20" style="padding-right: 20rpx;width: 100%;text-align: right;" value=""
								 placeholder-style="font-size: 24rpx;font-weight: normal;font-stretch: normal;line-height: 60rpx;letter-spacing: 0rpx;color: #c3c3c3;"
								 :placeholder="'请输入' + items.name" />
							</view>
						</view>
						<view class="list-item" v-if="items.type == 5">
							<view class="list_box">
								<view class="my-icon">
									<image src="../../../static/icon/footer_house.png" class="my-img"></image>
								</view>
								<view class="list_box_text">
									{{items.name}}
								</view>
							</view>
							<view class="input-box">
								<input type="text" v-model="formData[indexs].value" maxlength="20" style="padding-right: 20rpx;width: 100%;text-align: right;" value=""
								 placeholder-style="font-size: 24rpx;font-weight: normal;font-stretch: normal;line-height: 60rpx;letter-spacing: 0rpx;color: #c3c3c3;"
								 :placeholder="'请输入' + items.name" />
							</view>
						</view>
						<view class="list-item" @tap="selecteaddress(items.type,indexs)" v-if="items.type == 6">
							<view class="list_box">
								<view class="my-icon">
									<image src="../../../static/icon/footer_house.png" class="my-img"></image>
								</view>
								<view class="list_box_text">
									{{items.name}}
								</view>
							</view>
							<view class="right-icon">
								<image src="../../../static/images/right.png" class="right-img"></image>
							</view>
						</view>
						<view class="list-item" @tap="selecteaddress(items.type,indexs)" v-if="items.type == 7">
							<view class="list_box">
								<view class="my-icon">
									<image src="../../../static/icon/footer_house.png" class="my-img"></image>
								</view>
								<view class="list_box_text">
									{{items.name}}
								</view>
							</view>
							<view class="right-icon">
								<image src="../../../static/images/right.png" class="right-img"></image>
							</view>
						</view>
						<view class="list-item" v-if="items.type == 8">
							<view class="list_box">
								<view class="my-icon">
									<image src="../../../static/icon/footer_house.png" class="my-img"></image>
								</view>
								<view class="list_box_text">
									{{items.name}}
								</view>
							</view>
							<view class="input-box">
								<input type="number" v-model="formData[indexs].value" maxlength="20" style="padding-right: 20rpx;width: 100%;text-align: right;" value=""
								 placeholder-style="font-size: 24rpx;font-weight: normal;font-stretch: normal;line-height: 60rpx;letter-spacing: 0rpx;color: #c3c3c3;"
								 :placeholder="'请输入' + items.name" />
							</view>
						</view>
						<view class="list-item" @tap="selecteaddress(items.type,indexs)" v-if="items.type == 9">
							<view class="list_box">
								<view class="my-icon">
									<image src="../../../static/icon/footer_house.png" class="my-img"></image>
								</view>
								<view class="list_box_text">
									{{items.name}}
								</view>
							</view>
							<view class="right-icon">
								<image src="../../../static/images/right.png" class="right-img"></image>
							</view>
						</view>
					</view>
					

				</view>
				<view style="height:16rpx;background-color:#f4f4f4;"></view>
			</view>
			<!-- 配置信息结束 -->
			<view class="tui-goods-info">
				<tui-list-cell :hover="false" :lineLeft="false">
					<view class="tui-goods-title">
						商品信息
					</view>
				</tui-list-cell>
				<block v-for="(item,index) in 1" :key="index">
					<tui-list-cell :hover="false" padding="0">
						<view class="tui-goods-item">
							<image :src="listdata.all_pic[0].image" class="tui-goods-img"></image>
							<view class="tui-goods-center">
								<view class="tui-goods-name">{{listdata.appoint_name}}</view>
								<view>
									<tui-tag size="small" :fillet="true" type="coffee" v-if="listdata.appoint_type == 0">到店服务</tui-tag>
									<tui-tag size="small" :fillet="true" type="coffee" v-if="listdata.appoint_type == 1">上门服务</tui-tag>
								</view>
								<text class="tui-goods-attr">￥{{listdata.appoint_price}}</text>
								<tui-tag size="small" :fillet="false" type="red" v-if="listdata.payment_status == 0">一口价</tui-tag>
								<tui-tag size="small" :fillet="false" type="red" v-if="listdata.payment_status == 1">预付金</tui-tag>
							</view>
						</view>
					</tui-list-cell>
				</block>
				<tui-list-cell :hover="false">
					<view class="tui-padding tui-flex">
						<view class="text1">商品总额</view>
						<view v-if="listdata.payment_status==1">￥{{defaultAppointProduct.payment_price}}</view>
						<view v-if="listdata.payment_status== !1">￥{{listdata.payment_money}}</view>
					</view>
				</tui-list-cell>
				<tui-list-cell :arrow="hasCoupon" :hover="hasCoupon">
					<view class="tui-padding tui-flex">
						<view class="text1">商家优惠券</view>
						<view :class="{'tui-color-red':hasCoupon}">{{hasCoupon? couponInfo :'没有可用优惠券'}}</view>
					</view>
				</tui-list-cell>
				<tui-list-cell :arrow="hasCoupon" :hover="hasCoupon">
					<view class="tui-padding tui-flex">
						<view class="text1">系统优惠券</view>
						<view :class="{'tui-color-red':hasCoupon1}">{{hasCoupon1? couponInfo :'没有可用优惠券'}}</view>
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false" :lineLeft="false" padding="0">
					<view class="tui-remark-box tui-padding tui-flex">
						<view class="text1">留言</view>
						<input type="text" v-model="remark" class="tui-remark" placeholder="选填: 请先和商家协商一致" placeholder-class="tui-phcolor"></input>
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false" :last="true">
					<view class="tui-padding tui-flex tui-total-flex">
						<view class="tui-flex-end tui-color-red">
							<view class="tui-black">合计： </view>
							<view class="tui-size-26">￥</view>
							<view class="tui-price-large">{{listdata.order_price}}</view>
							<!-- <view class="tui-size-26">.00</view> -->
						</view>
					</view>
				</tui-list-cell>
			</view>
		</view>
		<view class="tui-safe-area"></view>
		<view class="tui-tabbar">
			<view class="tui-flex-end tui-color-red tui-pr-20">
				<view class="tui-black">待支付: </view>
				<view class="tui-size-26">￥</view>
				<view class="tui-price-large" v-if="listdata.payment_status==1">{{defaultAppointProduct.payment_price}}</view>
				<view class="tui-price-large" v-if="listdata.payment_status== !1">{{listdata.payment_money}}</view>
				<!-- <view class="tui-size-26">.00</view> -->
			</view>
			<view class="tui-flex-1">
				<tui-button type="red" shape="square" size="mini" @click="submit">去支付</tui-button>
			</view>
		</view>
		<!--底部选择层-->
		<view>
			<uni-popups ref="popups" type="bottom" style="width: 100%;">
				<view class="active-box">
					<view class="active-title">- 选择预约的店铺 -</view>
					<view class="detail-icon" @tap="closePopup">
						<image src="../../../static/images/guanbi.png" class="detail-img"></image>
					</view>
				</view>
				<view class="popups-list">
					<scroll-view class="scroll-box" scroll-y="true" scroll-top="0" show-scrollbar="true">
						<view class="list-box" :class="num === index?'active':''" @tap="selectstore(index,item.merchant_store_id,item.name)" v-for="(item,index) in listdata.store_list"
						 :key="index">
							<view class="text3"></view>
							<view class="text2">{{item.name}}</view>
						</view>
					</scroll-view>
				</view>
			</uni-popups>
		</view>
		<!--底部选择层-->
		<!-- 日期时间 -->
		<w-picker mode="dateTime" startYear="2017" endYear="2030" step="1" :defaultVal="['2018','09','10','12','48','45']"
		 :current="false" @confirm="onConfirm" ref="dateTime" themeColor="#f00"></w-picker>
		<!-- 日期 -->
		<w-picker mode="date" startYear="2017" endYear="2030" :defaultVal="['2019','10','31']" :current="false" @confirm="Confirmdate"
		 :disabledAfter="true" ref="date" themeColor="#f00"></w-picker>

		<w-picker
			mode="time"
			:defaultVal="['02','03','30']" 
			:current="false" 
			@confirm="Confirmtime" 
			ref="time"
			step="1"
		></w-picker>
		<!-- 性别 -->
		<w-picker v-if="selectList.length!=0" mode="selector" :defaultVal="['女']" @confirm="ConfirmSex" ref="selector"
		 themeColor="#f00" :selectList="selectList"></w-picker>
		 <hj-dragabledrawer :options="options" ref="dragBox">
		 	<view class="popup-box">
				<view class="head">
					<image src="../../../static/images/right.png" mode="" class="head-img" @tap="close"></image>
					<view class="head-text">选择预约时间</view>
				</view>
		 		<view @tap="selectbox(item,idx)" class="menu-box" v-for="(item,idx) in timeOrder" :class="num1 === idx? 'menu-active': '' ">{{idx}}</view>
				<view @tap="selectbox1(items.start)" class="menu-box1" v-for="(items,index1) in time_index" :class="(items.order == 'no')? 'menu-active1': '' ">
				<view>{{items.start}}</view>
				<view v-if="items.order == 'no'">不可预约</view>
				<view v-if="items.order == 'yes'">可预约</view>
				</view>
		 	</view>
		 </hj-dragabledrawer>
	</view>
</template>

<script>
	import wPicker from "../../village/component/w-picker/w-picker.vue";
	import tuiIcon from "../../../appComponent/uni/icon/icon.vue"
	import tuiTag from "../component/tag/tag.vue"
	import tuiButton from "../component/button/button.vue"
	import tuiListCell from "../component/list-cell/list-cell.vue"
	import tuiBottomPopup from "../component/bottom-popup/bottom-popup.vue"
	import uniPopups from "../../../appComponent/uni/uni-popups/uni-popups.vue"
	import hjDragabledrawer from '../component/hj-dragabledrawer/hj-dragabledrawer.vue'
	var common = require('../../../utils/common.js');
	var app = getApp();
	var _this;
	const getGoodsinfo = () => {
		common.post('Appoint_new&a=order_detail', {
			appoint_id: _this.appoint_id,
			menuId: _this.menuId,
		}, data => {
			console.log("nnnnnnn", data)
			_this.listdata = data.now_appoint;
			_this.formData = data.formData;
			_this.timeOrder = data.timeOrder;
			_this.defaultAppointProduct = data.defaultAppointProduct;
			//判断是否有商家&系统优惠券
			if(data.has_merchant_coupon == 0 || data.has_system_coupon == 0){
				_this.hasCoupon = false;
				_this.hasCoupon1 = false;
			}else{
				//商家和系统的id
				_this.merchant_id = data.mer_coupon.had_id;
				_this.system_id = data.system_coupon.had_id;
				if(data.mer_coupon.is_discount == 0 || data.system_coupon.is_discount == 0){
					_this.couponInfo = "满" + data.mer_coupon.order_money + "减" + data.system_coupon.discount
				}
			}
			
			var hh = _this.formData.filter(item => {
				return item.use_field
			})
			console.log("hhhhhhh",hh)
			for (let i in hh[0].use_field) {
				let msg = {};
				msg['label'] = hh[0].use_field[i];
				msg['value'] = Number(i);
				_this.selectList.push(msg)
			}
		});
	};
	const getPersoninfo = () => {
		common.post('Appoint_new&a=ajaxWorker', {
			appoint_id: _this.appoint_id,
			merchant_store_id: _this.merchant_store_id,
		}, data => {
			console.log("nnnnnnn", data)
			if (data.worker_list) {
				// _this.personHide = true;
				_this.worker_list = data.worker_list;
			}else{
				_this.personHide = false;
			}
		});
	};
	const getwokerTime = () => {
		common.post('Appoint_new&a=ajaxWorkerTime', {
			appoint_id: _this.appoint_id,
			worker_id: _this.worker_id,
		}, data => {
			console.log("nnnnnnn", data)
			// _this.timeOrder = data
		});
	};
	const getsubmitOrder = () => {
		console.log()
		common.post('Appoint_new&a=order_save', {
			appoint_id: _this.appoint_id,//预约id
			worker_id: _this.worker_id,//技师id
			service_date: _this.num1,//时间1
			service_time: _this.startTime,//时间2
			merchant_coupon_id:	_this.merchant_id,//商家id
			system_coupon_id: _this.system_id,// 系统id
			store_id: _this.merchant_store_id,// 店铺id
			product_id: _this.menuid,// 规格id
			custom_field: _this.custom_field,
		}, data => {
			console.log("8888888888888888888888888888888888888888888888", data)
			// _this.timeOrder = data
			
			if(data.msg === "请先进行登录！"){
				common.parseUrl(data.url)
			}else{
				common.parseUrl(data.href)
			}
		});
	};
	export default {
		components: {
			tuiButton,
			tuiListCell,
			tuiBottomPopup,
			tuiIcon,
			tuiTag,
			wPicker,
			uniPopups,
			hjDragabledrawer
		},
		data() {
			return {
				listdata: {},
				worker_list: [], // 技师列表
				formData: [], //配置列表
				timeOrder:{},
				hasCoupon: false,
				hasCoupon1: false,
				insufficient: false,
				couponInfo: "",
				menuid: '',
				appoint_id: '',
				num: -1,
				num1: -1,
				num2: -1,
				// 自定义表单选择项
				time1: '',
				time2: '',
				time3: '',
				sex: '',
				remark: '',
				name: '',
				jieshao: '',
				address: '',
				nummax: '',
				emailnum: '',
				phone: '',
				merchant_store_id: '',
				storename: '请选择预约店铺',
				personHide: false, //技师显示隐藏,
				selectList: [],
				options: {
					visible: false,
					rightMode: true,
					width:100
				},
				worker_id:'',
				time_index: {},
				startTime:'',
				defaultAppointProduct:{},
				merchant_id: '',//商家id
				system_id:'',//系统id
				custom_field: {},// 自定义表单输入数据
				timeindex: '', //选择时间的索引
			}
		},
		onLoad(options) {
			_this = this
			_this.appoint_id = options.appoint_id;
			_this.menuid = options.cateid;
			console.log("wwwwwww", _this.appoint_id)
			console.log("8888888888888888888", options.cateid)
			getGoodsinfo();
		},
		methods: {
			chooseAddr() {
				uni.navigateTo({
					url: "../address/address"
				})
			},
			selectePerson() {
				_this.$refs.popups.open()
			},
			selecteTime(){
				_this.$refs.dragBox.open()
				getwokerTime();
			},
			close(){
				_this.$refs.dragBox.close()
			},
			closePopup() {
				_this.$refs.popups.close()
			},
			selectstore(index, store_id, name) {
				_this.num = index;
				_this.merchant_store_id = store_id;
				_this.storename = name,
					getPersoninfo();
				_this.closePopup()
			},
			selectbox(item,index){
				_this.num1 = index;
				_this.time_index = item,
				console.log("333333333333333",index)
			},
			selectbox1(startTime){
				_this.startTime = startTime;
				_this.close()
			},
			btnPay() {
				uni.navigateTo({
					url: "../success/success"
				})
			},
			//提交
			submit(){
				
				
				
				console.log('data____',_this.formData)
				_this.custom_field = _this.formData
				getsubmitOrder()
			},
			goUrl() {

			},
			onConfirm(val) {
				console.log("33333333",val)
				_this.time1 = val.result
			},
			Confirmdate(val) {
				console.log(val);
				_this.time2 = val.result
			},
			Confirmtime(val) {
				console.log(val);
				_this.time3 = val.result
			},
			ConfirmSex(val) {
				console.log("33333333",val)
				_this.sex = val.result
			},
			selecteaddress(type,indexs) {
				// console.log("男女----",item.use_field)
				_this.timeindex = indexs
				if (type == 3) {
					_this.$refs.selector.show()
				} else if (type == 6) {
					_this.$refs.date.show()
				} else if (type == 7) {
					_this.$refs.time.show()
				} else if (type == 9) {
					_this.$refs.dateTime.show()
				}
			},
		}
	}
</script>

<style>
	.container {
		padding-bottom: 98rpx;
	}

	.tui-box {
		padding: 20rpx 0 118rpx;
		box-sizing: border-box;
	}

	.tui-top {
		margin-top: 20rpx;
		overflow: hidden;
	}

	.tui-goods-title {
		font-size: 28rpx;
		display: flex;
		align-items: center;
	}

	.tui-padding {
		box-sizing: border-box;
	}

	.tui-goods-item {
		width: 100%;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
	}

	.tui-goods-img {
		width: 180rpx;
		height: 180rpx;
		display: block;
		flex-shrink: 0;
	}

	.tui-goods-center {
		flex: 1;
		padding: 20rpx 8rpx;
		box-sizing: border-box;
	}

	.tui-goods-name {
		max-width: 310rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		font-size: 26rpx;
		line-height: 32rpx;
	}

	.tui-goods-attr {
		font-size: 30rpx;
		color: red;
		line-height: 32rpx;
		padding-top: 20rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		margin-right: 15rpx;
	}

	.tui-price-right {
		text-align: right;
		font-size: 24rpx;
		color: #888888;
		line-height: 30rpx;
		padding-top: 20rpx;
	}

	.tui-flex {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 26rpx;
	}

	.tui-total-flex {
		justify-content: flex-end;
	}

	.tui-color-red,
	.tui-invoice-text {
		color: #E41F19;
		padding-right: 30rpx;
	}

	.tui-black {
		color: #222;
		line-height: 30rpx;
	}

	.tui-goods-price {
		display: flex;
		align-items: center;
		padding-top: 20rpx;
	}

	.tui-size-26 {
		font-size: 26rpx;
		line-height: 26rpx;
	}

	.tui-price-large {
		font-size: 34rpx;
		line-height: 32rpx;
		font-weight: 600;
	}

	.tui-flex-end {
		display: flex;
		align-items: flex-end;
		padding-right: 0;
	}

	.tui-phcolor {
		color: #B3B3B3;
		font-size: 26rpx;
	}

	/* #ifndef H5 */
	.tui-remark-box {
		padding: 22rpx 30rpx;
	}

	/* #endif */
	/* #ifdef H5 */
	.tui-remark-box {
		padding: 26rpx 30rpx;
	}

	/* #endif */

	.tui-remark {
		flex: 1;
		font-size: 26rpx;
		padding-left: 64rpx;
	}

	/* #ifdef H5 */
	>>>uni-switch .uni-switch-input {
		margin-right: 0 !important;
	}

	/* #endif */
	.tui-tabbar {
		width: 93%;
		height: 98rpx;
		background: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 26rpx;
		padding-bottom: env(safe-area-inset-bottom);
		z-index: 99;
		padding: 0 30rpx;
	}

	.tui-pr-20 {
		padding-right: 20rpx;
	}

	.tui-none-addr {
		height: 80rpx;
		padding-left: 5rpx;
		display: flex;
		align-items: center;
	}

	.tui-addr-img {
		width: 36rpx;
		height: 46rpx;
		display: block;
		margin-right: 15rpx;
	}


	.tui-pr25 {
		padding-right: 25rpx;
	}

	.tui-safe-area {
		height: 1rpx;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.text1 {
		font-size: 30rpx;
		font-weight: 700;
	}

	.mylist {
		background: #FFFFFF;
		overflow: hidden;
	}

	.list-item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx 30rpx;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		background: #ffffff;
		border-bottom: 1rpx solid #F5F5F5;
	}

	.list_box {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		flex-shrink: 0;
	}

	.list_box_text {
		font-size: 28rpx;
		font-weight: 400;
		color: rgba(21, 21, 21, 1);
		line-height: 60rpx;
		margin-left: 15rpx;
	}

	.title-text {
		font-size: 30rpx;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		line-height: 60rpx;
	}

	.right-icon {
		width: 30rpx;
		height: 30rpx;
		align-items: center;
	}

	.right-img {
		width: 100%;
		height: 100%;
		display: block;
	}

	.my-icon {
		width: 45rpx;
		height: 45rpx;
	}

	.my-img {
		display: block;
		width: 100%;
		height: 100%;
	}

	.input-box {
		width: 100%;
	}

	.card {
		background: #FFFFFF;
		padding: 30rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.left-icon {
		width: 90rpx;
		height: 90rpx;
		flex-shrink: 0;
	}

	.left-img {
		width: 100%;
		height: 100%;
		display: block;
	}

	.right-card {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		margin-left: 15rpx;
	}

	.text-box {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.text-phone {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}

	.right-text {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}

	.phone-icon {
		width: 30rpx;
		height: 30rpx;
	}

	.phone-img {
		display: block;
		width: 100%;
		height: 100%;
	}

	.right-icon {
		width: 30rpx;
		height: 30rpx;
	}

	.right-img {
		display: block;
		width: 100%;
		height: 100%;
	}

	.title {
		font-size: 30rpx;
		font-weight: 700;
		font-stretch: normal;
		line-height: 60rpx;
		letter-spacing: 0px;
	}

	.text-left {
		font-size: 24rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 40rpx;
		letter-spacing: 0px;
		color: #999999;
	}

	.tips {
		font-size: 20rpx;
		font-weight: normal;
		font-stretch: normal;
		letter-spacing: 0rpx;
		color: #FFFFFF;
		padding: 0rpx 10rpx;
		background: rgb(33, 130, 243);
		border-radius: 5rpx;
		margin-left: 15rpx;
	}

	.text {
		font-size: 24rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 90rpx;
		letter-spacing: 0px;
		color: #CCCCCC;
		padding-left: 100rpx;
	}

	.active-box {
		display: block;
		position: relative;
		overflow-x: hidden;
	}

	/deep/.uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
		border-radius: 20rpx 20rpx 0rpx 0rpx;
	}

	.active-title {
		font-size: 34rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 100rpx;
		letter-spacing: 0px;
		text-align: center;
		color: #000000;
		width: 100%;
	}

	.detail-icon {
		position: absolute;
		right: 0rpx;
		top: 0rpx;
		height: 100rpx;
		width: 100rpx;
	}

	.detail-img {
		width: 50%;
		height: 50%;
		margin-left: 25%;
		margin-top: 25%;
		display: block;
	}

	.popups-list {}

	.scroll-box {
		height: 500rpx;
		padding-top: 30rpx;
	}

	.list-box {
		width: 660rpx;
		height: 90rpx;
		background-color: #f8f9fa;
		border-radius: 10rpx;
		font-size: 30rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 90rpx;
		letter-spacing: 0rpx;
		color: #666666;
		margin: 30rpx auto 0;
		padding-left: 30rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}

	.scroll-box .list-box:first-child {
		margin-top: 0rpx;
	}

	.active {
		width: 660rpx;
		height: 90rpx;
		background-color: #2681f3;
		border-radius: 10rpx;
		font-size: 30rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 90rpx;
		letter-spacing: 0rpx;
		color: #FFFFFF;
		margin: 0rpx auto;
		margin-top: 30rpx;
		padding-left: 30rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}

	.text3 {
		width: 13rpx;
		height: 13rpx;
		border: 2rpx solid #CCCCCC;
		border-radius: 13rpx;
	}

	.text2 {
		margin-left: 15rpx;
	}
	.popup-box {
		position: absolute;
		width: 100%;
		background: #FFFFFF;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
	.head {
		width: 100%;
		background: #FFFFFF;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.head-img {
		display: inline-block;
		width: 50rpx;
		height: 40rpx;
		transform: rotate(180deg);
	}
	.head-text {
		width: 100%;
		transform: translateX(-20rpx);
		line-height: 80rpx;
		text-align: center;
	}
	.menu-box {
		width: 24.5%;
		padding: 10rpx 0rpx;
		border: 2rpx solid #d2d1d6;
		font-size: 20rpx;
		line-height: 66rpx;
		color: #2681f3;
		/* margin-left: 30rpx;
		margin-top: 30rpx; */
		background-color: #e9f2fe;
		text-align: center;
	}
	.menu-active {
		width: 24.5%;
		padding: 10rpx 0rpx;
		border: 2rpx solid #d2d1d6;
		font-size: 20rpx;
		line-height: 66rpx;
		color: #000000;
		/* margin-left: 30rpx;
		margin-top: 30rpx; */
		background-color: #FFFFFF;
		text-align: center;
	}
	.menu-box:nth-child(-n+4){
		margin-top: 0rpx;
	}
	.menu-box1 {
		width: 24.5%;
		padding: 10rpx 0rpx;
		border: 2rpx solid #d2d1d6;
		font-size: 20rpx;
		color: #2681f3;
		/* margin-left: 30rpx;
		margin-top: 30rpx; */
		background-color: #e9f2fe;
		text-align: center;
	}
	.menu-box1:nth-child(-n+4){
		margin-top: 0rpx;
	}
	.menu-active1 {
		width: 24.5%;
		padding: 10rpx 0rpx;
		border: 2rpx solid #d2d1d6;
		font-size: 20rpx;
		color: #000000;
		background-color: rgb(245,245,245);
		text-align: center;
	}
	/deep/ .tui-tag-small {
		display: inline-block;
	}
</style>
